<template>
    <section style="overflow-y: auto;" :style="{height: height+'px'}">
        <div style="width: 1100px;margin-left:40px;height: 40px;border-bottom: 1px solid #dcdfe6;">
            <div style="float: right;">
                <el-button :type="(ruleData.size_code_status == 1 ?'danger':'warning')" plain size="small"
                    @click="lockBtn" :loading="lockLoading">
                    {{ruleData.size_code_status == 1 ? "解锁":"锁定"}}
                </el-button>
                <el-button type="primary" v-print="'#printMe'" plain size="small">打印</el-button>
            </div>

        </div>
        <el-row id="printMe">
            <el-row style="text-align: center;margin-bottom: 16px;">
                <span style="font-size: 20px;font-weight: 800;">大货生产规格尺寸表</span>
            </el-row>
            <el-row style="border-bottom: 1px solid #dcdfe6;padding-bottom: 10px;">
                <el-col :span="4">
                    <el-image v-if="ruleData.wear_image && ruleData.wear_image[0]" :src="ruleData.wear_image[0]"
                              :preview-src-list="ruleData.wear_image" style="width:95%;text-align: center;" fit="contain">
                        <div slot="error" class="image-slot">
                            <svg t="1718681716906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2623" width="128" height="128"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2624"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2625"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2626"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2627"></path></svg>
                        </div>
                    </el-image>
                </el-col>
                <el-col :span="20" style="font-size: 14px;">
                    <el-row style="margin-bottom: 10px;">
                        <span style="font-size: 16px;font-weight: bold;">{{ruleData.type_no || "暂无"}}</span>
                    </el-row>
                    <el-row style="margin-bottom: 10px;">
                        <el-col :span="8">
                            <div style="display: inline-block;width: 60px;">品名：</div>
                            <span>{{ruleData.type_name || "暂无"}}</span>
                        </el-col>
                        <el-col :span="8">
                            <div style="display: inline-block;width: 60px;">版师：</div>
                            <span>{{ruleData.publisher || "暂无"}}</span>
                        </el-col>
                        <el-col :span="8">
                            <div style="display: inline-block;width: 70px;">更新时间：</div>
                            <span>{{ (ruleLog.length && ruleLog[0].createtime) || "暂无"}}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <div style="display: inline-block;width: 60px;">更新人：</div>
                            <span>{{(ruleLog.length && ruleLog[0].username) || "暂无"}}</span>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-row style="margin-top: 15px;">
                <el-table :data="ruleData.plank_house_table_data" v-if="ruleData.plank_house_table_data" size="mini" border style="width: 100%;"
                    :header-cell-style="cellStyleHeader" :cell-style="cellStyle">
                    <el-table-column prop="position_title" label="部位" align="center"></el-table-column>
                    <el-table-column prop="position_method" label="测量方法" align="center"></el-table-column>
                    <el-table-column prop="gear_difference" label="*档差" align="center"></el-table-column>
                    <template v-for="(item, index) in ruleData.plank_house_table_title.code_list">
                        <el-table-column :key="index" v-if="item.is" :label="item.size_code.title" align="center">
                            <el-table-column :prop="item.size_code.title" :key="index" :label="item.height_code.title
                                ? item.height_code.title + '/' + item.waist_code.title: ''"
                                align="center" width="80">
                                <template slot-scope="{ row }">
                                    {{ row.code_list[item.size_code.title] }}
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </template>
                    <el-table-column prop="sample_code" :label="ruleData.plank_house_table_title.sample_code" align="center"></el-table-column>
                    <el-table-column prop="sample_code_f1" label="样衣尺寸(cm)" align="center"></el-table-column>
                    <el-table-column prop="tolerance" label="公差±(cm)" align="center"></el-table-column>
                    <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
                </el-table>
            </el-row>
            <el-row style="margin-top: 15px" v-if="ruleData.specifications_base_cdoe">
                <table border style="width: 100%" class="position_table">
                    <tr>
                        <td style="font-weight: bold;text-align: center;color: #8c939d" v-for="(item, index) in ruleData.plank_house_table_title.code_list" :key="index"
                            v-if="item.is">{{item.size_code.title}}
                        </td>
                    </tr>
                    <tr style="background-color: white">
                        <td style="text-align: center" v-for="(item, index) in ruleData.plank_house_table_title.code_list" :key="index" v-if="item.is">
                            {{ruleData.specifications_base_cdoe.base_size_code[index].specifications_base_cdoe}}
                        </td>
                    </tr>
                </table>
            </el-row>
            <el-row style="font-size: 14px;margin-top: 15px">
                <el-row class="border-1">
                    <el-col :span="8" class="border-2">测量图</el-col>
                    <el-col :span="16" class="border-3">
                        <template v-if="ruleData.measure_image!=undefined && ruleData.measure_image.length!=0">
                            <el-image v-for="item in ruleData.measure_image"
                                      :key="item" :src="item" fit="fill" style="height: 100px" :preview-src-list="[item]">
                                <div slot="error" class="image-slot">
                                    暂无图片
                                </div>
                            </el-image>
                        </template>
                        <template v-else>
                            暂无图片
                        </template>
                    </el-col>
                </el-row>
                <el-row class="border-1">
                    <el-col :span="8" class="border-2">特别注意</el-col>
                    <el-col :span="16" class="border-3">{{ ruleData.be_careful || "暂无" }}</el-col>
                </el-row>
                <el-row class="border-1">
                    <el-col :span="8" class="border-2">温馨提示</el-col>
                    <el-col :span="16" class="border-3">{{ ruleData.reminder || "暂无" }}</el-col>
                </el-row>
                <el-row class="border-1">
                    <el-col :span="8" class="border-2">成衣风险</el-col>
                    <el-col :span="16" class="border-3">{{ ruleData.risk || "暂无" }}</el-col>
                </el-row>
                <el-row class="border-1" style="border-bottom: 1px solid #dcdfe6">
                    <el-col :span="8" class="border-2">样衣修改意见</el-col>
                    <el-col :span="16" class="border-3">{{ ruleData.modify_comments || "暂无" }}</el-col>
                </el-row>
            </el-row>
        </el-row>
    </section>
</template>

<script>
import {designDetailLock} from "@/api/bs/design";

export default {
    name: "designRule",
    props: {
        ruleData:{
            type: Object,
            default: {}
        },
        height: {
            type: Number,
            default: 0
        },
        ruleLog:{
            type: Array,
            default: []
        }
    },
    data() {
        return {
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            lockLoading: false,
            user: {},
            nodeActions: [],
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{

    },
    methods: {
        cellStyleHeader(row, rowIndex){
            if (row.column.label == this.is_base_title) {
                return { color: "red" };
            }
        },
        cellStyle(){

        },
        lockBtn(){
            let {id, type_no, size_code_status} = this.ruleData;
            let status = size_code_status == 1 ? 0 : 1;
            let label = size_code_status == 1 ? "解锁" : "锁定";
            let obj = {
                id: id,
                type_no: type_no,
                type: 5,
                status: status,
            };
            this.$confirm("确定"+label, '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.lockLoading = true;
                designDetailLock(obj).then((res)=>{
                    this.lockLoading = false;
                    if(res.code === 0){
                        this.$message.success(label+"成功");
                        this.$set(this.ruleData, 'size_code_status', status);
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.lockLoading = false;
                })
            }).catch(() => {

            });
        },
    },
    mounted() {

    }
}
</script>

<style scoped>
@page {
    size: auto;
    margin: 0mm;
}
#printMe{
    width:1100px;
    margin-top: 30px;
    margin-left: 40px;
}
/deep/ .el-table .cell {
    font-weight: bold;
}
.border-1{
    border-top: 1px solid #dcdfe6;
    border-left: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
}
.border-2{
    padding: 10px 0;
    text-align: center
}
.border-3{
    padding: 10px 0 10px 4px;
    border-left: 1px solid #dcdfe6;
}

table, th, td {
    border: 1px solid #909399;
    border-collapse: collapse; /* 移除单元格之间的间隔 */
    padding: 6px;
}

.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}
</style>
